@import "comment.less";
@baseFont: 50;

body {
  min-width: 320px;
  max-width: 750px;
  width: 750 / @baseFont;
  margin: 0 auto;
  line-height: 1.5;
}

.header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750rem / @baseFont;
  height: 90rem / @baseFont;
  background-color: #ffc001;
}

.classify {
  width: 42rem / @baseFont;
  height: 70rem / @baseFont;
  margin-left: 10rem /@baseFont;
}
.classify img{
  width: 100%;
  height: 100%;
}

.search {
  flex: 1;
  height: 67rem / @baseFont;
  margin: 0 20rem / @baseFont;
  background-color: #fff2cc;
  outline: none;
  border: 0;
  border-radius: 35rem/ @baseFont;
  padding: 0 25rem / @baseFont;
  font-size: 25rem / @baseFont;
  color: #757575;

}

.login {
  width: 70rem / @baseFont;
  height: 60rem / @baseFont;
  line-height: 60rem / @baseFont;
  text-align: center;
  font-size: 25rem / @baseFont;
  color: white;
}
.banner{
  width: 750rem / @baseFont;
  height: 7.36rem;
}
.banner img {
  width:100%;
  height: 100%;
}

.add {
  width: 15rem;
  display:flex;
}
.add a{
  flex: 1;
}
.add a img {
  width: 100%;
}
.nav{
  width: 15rem;
}

.nav a {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 750rem / 5 / @baseFont;
  height: 165rem / @baseFont;
  font-size: 25rem / @baseFont;
  color: #222;
}
.nav a img{
  width: 90rem / @baseFont;
  height: 90rem / @baseFont;
}

